<style scoped>
.echarts{
    width: 100%;
    height: 100%;
}
</style>

<template>
    <div class="echarts" ref="chartEl" :style="{
        height: props.height + 'px'
    }"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue';

interface Props {
    options: any
    height: number
}

const props = defineProps<Props>()
const chartEl = ref<HTMLElement>();
let chart : any = null

onMounted(async() => {
    await nextTick()
    chart = echarts.init(chartEl.value!);
    chart.setOption(props.options)
    window.addEventListener('resize', () => {
        if (chart) {
            setTimeout(() => {
                chart.resize()
            }, 500)
        }
    })
})

onBeforeUnmount(() => {
    if (chart) {
        chart.dispose()
    }
})

watch(() => props.options, (newVal) => {
    if (chart) {
        chart.setOption(newVal)
    }
})
</script>